<template>
    <aside class="sidebar2">
        <h1>推荐</h1>
            <div class="recommend list-item">
                <a href="">太极推手</a>
            </div>
        <h1>活动</h1>
            <div class="blog list-item">
                <a href="">加入非遗</a>
            </div>
        <h1>广告</h1>
            <div class="ad list-item">
                <a href="">加入非遗</a>
            </div>
    </aside>
</template>
    
<script>
export default {
    name: 'SidebarRight',
}
</script>

<style scoped>
.sidebar2{
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-top: 50px;
    width: 300px;
    height: 100%;
    right: 50px;
}
.list-item {
    padding: 10px 15px;
    border-bottom: 1px solid #eeeeee5b;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}
.list-item:hover {
    background-color: #f5f5f539;
}
a{
    text-decoration: none;
    color: #eee;
}
h1{
    font-size: 18px;
    color: darkred;
}
</style>